<template>
  <div class="root">
    <m-header title="基本资料">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">
      <div class="data-list">
        <div class="data-list-item" @click="toUpdateAvatar">
          <div class="data-list-item-element-left">
            头像
          </div>
          <div class="data-list-item-element-right">
            <img class="avatar" :src="myInfo.avatar ? myInfo.avatar : defaultAvatar" />
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

        <div class="data-list-item" @click="openNicknameDialog">
          <div class="data-list-item-element-left">
            昵称
          </div>
          <div class="data-list-item-element-right">
            <span> {{myInfo.nickname}} </span>
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

        <div class="data-list-item" @click="openGenderDialog">
          <div class="data-list-item-element-left">
            性别
          </div>
          <div class="data-list-item-element-right">
            <span> {{myInfo.gender == 0 ? '女' : '男'}} </span>
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

        <div class="data-list-item" @click="openDescriptionDialog">
          <div class="data-list-item-element-left">
            个性签名
          </div>
          <div class="data-list-item-element-right2">
            <div class="desc"> {{myInfo.description}}</div>
            <div>
              <img class="back-icon" src="../assets/images/more_icon.png" />
            </div>
          </div>
        </div>

      </div>

      <div class="interest-tag" @click="tagManage">
        <div class="interest-tag-title">
          兴趣标签
        </div>

        <div class="interest-tag-list">
          <mu-badge class="tag-item-margin" v-for="(tag,index) in myInfo.tagList" :primary="index%2===0" :secondary="index%2===1" :content="tag.content"
            :key="index" />
        </div>
      </div>

      <!--<input id="upload" type="file" accept="image/*;" capture="camera" />
      <br/>-->

      <mu-dialog :open="nicknameDialog" @close="closeDialog" bodyClass="dialog-body">
        <mu-text-field id="nicknameInput" hintText="请输入昵称" :value="myInfo.nickname" :errorText="nicknameInputErrorText" @textOverflow="handleNicknameInputOverflow"
          :maxLength="10" />
        <mu-flat-button slot="actions" @click="closeDialog" primary label="取消" />
        <mu-flat-button slot="actions" primary @click="updateNickname" label="确定" />
      </mu-dialog>

      <mu-dialog :open="genderDialog" @close="closeDialog" bodyClass="dialog-body">

        <input type="radio" name="genderRadio" value="1" v-model="myInfo.gender" class="gender-radio" /> 男
        <br/>
        <input type="radio" name="genderRadio" value="0" v-model="myInfo.gender" class="gender-radio" /> 女
        <!--<mu-flat-button slot="actions" @click="closeDialog" primary label="取消" />-->
        <mu-flat-button slot="actions" primary @click="updateGender" label="确定" />
      </mu-dialog>

      <mu-dialog :open="descriptionDialog" @close="closeDialog" bodyClass="dialog-body">
        <mu-text-field id="descInput" hintText="请输入你的个性签名" :value="myInfo.description" :errorText="descriptionInputErrorText" @textOverflow="handleDescInputOverflow"
          :maxLength="40" />
        <mu-flat-button slot="actions" @click="closeDialog" primary label="取消" />
        <mu-flat-button slot="actions" primary @click="updateDescription" label="确定" />
      </mu-dialog>

    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import defaultAvatar from '../assets/images/default_avatar.png'
  import {
    mapState,
    mapActions,
    mapGetters,
  } from 'vuex'
  import {
    UPDATE_MY_DESC,
    UPDATE_MY_NICKNAME
  } from '../store/myInfo.js'
  export default {
    data() {
      return {
        descriptionDialog: false,
        nicknameDialog: false,
        genderDialog: false,
        descriptionInputErrorText: '',
        nicknameInputErrorText: '',
        defaultAvatar,
        nicknameOverflow: false,
        descriptionOverflow: false,
      }
    },

    methods: {
      ...mapActions([UPDATE_MY_DESC, UPDATE_MY_NICKNAME]),

      tagManage() {
        this.$router.push('/interesttagmanage');
      },

      openDescriptionDialog() {
        this.descriptionDialog = true;
      },
      openNicknameDialog() {
        this.nicknameDialog = true;
      },
      openGenderDialog() {
        this.genderDialog = true;
      },
      closeDialog() {
        this.descriptionDialog = false;
        this.nicknameDialog = false;
        this.genderDialog = false;
      },
      updateDescription() {

        if (this.descriptionOverflow) return;

        var _this = this;
        var desc = document.getElementById('descInput').getElementsByTagName('input')[0].value;

        this.$http.post('user/description', {
            description: desc
          })
          .then(function (response) {
            if (response.data.code === '0') {
              _this.UPDATE_MY_DESC(desc);
            }
            _this.closeDialog();
            // console.log(_this.$store.state.user.description); //这里的user是模块
            // }
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      updateNickname() {
        if (this.nicknameOverflow) return;

        var _this = this;
        var nickname = document.getElementById('nicknameInput').getElementsByTagName('input')[0].value;

        this.$http.post('user/nickname', {
            nickname: nickname
          })
          .then(function (response) {
            if (response.data.code === '0') {
              // console.log('success');
              _this.UPDATE_MY_NICKNAME(nickname);
            }
            _this.closeDialog();
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      updateGender() {
        var _this = this;
        // var nickname = document.getElementById('nicknameInput').getElementsByTagName('input')[0].value;

        this.$http.post('user/gender', {
            gender: _this.myInfo.gender
          })
          .then(function (response) {
            _this.closeDialog();
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      toUpdateAvatar() {
        this.$router.push('UpdateAvatar');
      },

      handleNicknameInputOverflow(isOverflow) {
        this.nicknameInputErrorText = isOverflow ? '不能超过10个字符！' : ''
        this.nicknameOverflow = isOverflow;
      },
      handleDescInputOverflow(isOverflow) {
        this.descriptionInputErrorText = isOverflow ? '不能超过40个字符！' : ''
        this.descriptionOverflow = isOverflow;
      }
    },
    computed: mapState({
      myInfo: (state) => state.myInfo
    }),
    components: {
      mHeader
    },
    mounted() {}
  }

</script>

<style lang='less' scoped>
  /*@import "../assets/less/common.less";*/
  .data-list {
    background-color: white;
    font-size: 16px;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      background-color: white;
      border-bottom: 1px solid #E6E6E6;
      padding: 16px 24px 16px 24px;
      &-element-left {
        color: #333333;
      }
      &-element-right {
        /*display: flex;*/
        /*flex-direction: row;*/
        color: #666666;
        .back-icon {
          width: 24px;
          margin-left: 4px;
        }
        .avatar {
          width: 56px;
        }
        .desc {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          /*width: 60%;*/
        }
      }
      &-element-right2 {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        color: #666666;
        max-width: 70%;
        .back-icon {
          width: 24px;
          margin-left: 4px;
        }
        .avatar {
          width: 56px;
        }
        .desc {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          /*width: 60%;*/
        }
      }
    }
  }
  
  .interest-tag {
    margin-top: 8px;
    background-color: white;
    font-size: 16px;
    padding: 16px 24px 16px 24px;
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6;
    display: flex;
    // align-items: center;
    &-title {
      overflow: hidden;
      white-space: nowrap;
      width: 40%;
    }
    &-list {}
  }
  
  .dialog-body {
    padding: 12px 24px 0 24px !important;
  }
  
  .gender-radio {
    margin: 4px 8px;
  }

</style>
